<section class="body-container">
  <div class="table-content-area">
    <div class="table-search-area">
      <nz-input-group [nzPrefix]="prefixIconSearch" style="width: 300px">
        <input class="search-input" nz-input type="text" placeholder="Filter by group name" i18n-placeholder="@@iam.team.details.group-filter-placeholder" [(ngModel)]="filter.name" (ngModelChange)="doSearch(true)">
      </nz-input-group>
      <ng-template #prefixIconSearch>
        <i nz-icon nzType="icons:icon-search"></i>
      </ng-template>
      <nz-select class="group-filter nz-select-40 rounded filter" [(ngModel)]="filter.getAllGroups" (ngModelChange)="doSearch(true)">
        <nz-option [nzValue]="true" nzLabel="All" i18n-nzLabel="@@iam.team.details.all-groups"></nz-option>
        <nz-option [nzValue]="false" nzLabel="Containing current member" i18n-nzLabel="@@iam.team.details.current-groups"></nz-option>
      </nz-select>
    </div>
    <div class="table-wrapper">
      <nz-table #table nzSize="small"
                [nzData]="groups.items"
                [nzFrontPagination]="false"
                [nzLoading]="isLoading"
                [nzTotal]="groups.totalCount"
                [(nzPageSize)]="filter.pageSize"
                (nzPageSizeChange)="doSearch()"
                [(nzPageIndex)]="filter.pageIndex"
                (nzPageIndexChange)="doSearch()">
        <thead>
        <tr>
          <th i18n="@@common.name">Name</th>
          <th i18n="@@iam.team.details.description">Description</th>
          <th i18n="@@common.actions">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of table.data">
          <td (click)="goToGroup(item.id)">{{item.name}}</td>
          <td>{{item.description}}</td>
          <td>
            <a class="primary-link-btn" (click)="goToGroup(item.id)" i18n="@@common.details">Details</a>
            <nz-divider nzType="vertical"></nz-divider>
            <ng-container *ngIf="item.isGroupMember">
              <a style="color: #717D8A"
                 [nz-popconfirm]="confirm"
                 nzPopconfirmPlacement="bottomRight"
                 (nzOnConfirm)="removeFromGroup(item.id)">
                <ng-container i18n="@@common.remove">Remove</ng-container>
              </a>
              <ng-template #confirm>
                <span>
                  <i nz-icon nzType="question-circle" nzTheme="fill" style="margin-right: 4px; color: #FAAD14;"></i>
                  <ng-container i18n="@@iam.team.details.remove-member-from">Are you sure to remove the member from group: </ng-container> <strong>{{item.name}}</strong> <ng-container i18n="@@iam.team.details.remove-member-from-suffix">?</ng-container>
                </span>
              </ng-template>
            </ng-container>
            <ng-container *ngIf="!item.isGroupMember">
              <a class="primary-link-btn" (click)="addToGroup(item.id)" i18n="@@common.add">Add</a>
            </ng-container>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</section>

